<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery简单的拖拽的实现</title>
	<style rel="stylesheet">
		.drag-box{
			position:absolute;
			width:100px;
			height:100px;
			background:red;
		}
	</style>
	<script src="./jquery-3.1.0.js" type="text/javascript"></script>
	<script>
		$.fn.extend({
			drag:function(){
				var disX=0;
				var disY=0;
				var This=this;
				this.mousedown(function(ev){
					disX=ev.pageX-$(this).offset().left;
					disY=ev.pageY-$(this).offset().top;
					$(document).mousemove(function(ev){
						This.css('left',ev.pageX-disX);
						This.css('top',ev.pageY-disY);

					})
					$(document).mouseup(function(){
						$(this).off();
					})
					return false;
				})
			}
		})
		$(function(){
			$('.drag-box').drag();
		})
	</script>
</head>
<body>
	<div class="drag-box"></div>
</body>
</html>